<template>
    <div class="personAddIndex" style="width: 100%">
        <el-button class="el-button--primary">PersonAdd</el-button>
        <el-form class="addForm"
                 :ref="addForm"
                 :model="person" :rules="rules">

            <el-form-item prop="name" class="formItem">
                <el-input v-model.trim="person.name">
                    <template slot="prepend">姓名:</template>
                </el-input>
            </el-form-item>


            <el-form-item prop="age" class="formItem">年龄：
                <el-input-number   v-model="person.age" >
                </el-input-number>
            </el-form-item>
            <el-form-item prop="male" class="formItem">性别：
                <el-radio border="" v-model="person.male" :label="true">男
                </el-radio>
                <el-radio border="" v-model="person.male" :label="false">女
                </el-radio>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-edit"
                           @click="add1">ajaxForm提交
                </el-button>
                <el-button type="primary" icon="el-icon-edit"
                           @click="add2">ajaxJson提交
                </el-button>
                <el-button type="warning" icon="el-icon-remove"
                           @click="()=>$refs[addForm].resetFields()">重置
                </el-button>
            </el-form-item>
        </el-form>


    </div>
</template>

<script>
    // import New from './components/New.vue';
    import * as qs from "qs";

    export default {

        name: "PersonAdd",
        components: {
            // New,Old,
        },
        props: {
            sampleP: {
                type: Number,
                default: 0
            },
        },
        data() {
            return {
                sampleD: 'value',
                addForm:'addFrom',
                person:{

                    name:'zhangsan',
                    age:19,
                    male:true,
                },
                rules:{
                    name: [
                        {required: true, message: '请输入名字', trigger: 'blur'},
                    ],
                    age: [
                        {required: true, message: '请选择年龄', trigger: 'blur'},
                    ],
                }
            }
        },
        computed: {
            // sampleC() {
            //     return this.sampleD+'--';
            // }
        },
        created() {
        },
        mounted() {
        },
        methods: {
            sampleM() {

            },
            add1(){
                this.$notify({title: '系统提示：',
                    message: JSON.stringify(this.person)});

                let url = "/personForm";
                this.$refs[this.addForm].validate((valid) => {
                    // this.$message.warning(JSON.stringify("hi" + this.user.username+this.user.password));
                    if (valid) {
                        this.$http({
                            method: 'post',
                            url: url,
                            data: qs.stringify(this.person),
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded'
                            },
                            before:() =>{

                                this.$message.warning("toSend；　"+qs.stringify(this.person));
                            }
                        }).then(res => {

                            this.$message.warning("收到回复；　"+JSON.stringify(res.data));
                            this.person = res.data;
                            // this.$refs[this.addForm].resetFields();


                        }).catch(res=> console.log(JSON.stringify(res)));
                    } else {
                        this.$message.warning(JSON.stringify("validate mistake"))
                    }
                });

            },
            add2(){
                this.$notify({title: '系统提示：',
                    message: JSON.stringify(this.person)});

                let url = "/personAjax";
                this.$refs[this.addForm].validate((valid) => {
                    // this.$message.warning(JSON.stringify("hi" + this.user.username+this.user.password));
                    if (valid) {
                        this.$http({
                            method: 'post',
                            url: url,
                            data: this.person,
                            headers: {
                                'Content-Type': 'application/json'
                            },
                        }).then(res => {

                            this.$message.warning("保存成功；　"+JSON.stringify(res.data));
                            this.person = res.data;

                        }).catch(res=> console.log(JSON.stringify(res)));
                    } else {
                        this.$message.warning(JSON.stringify("validate mistake"))
                    }
                });

            },

        },
        watch: {
            // sampleC(newValue, oldValue) {
            //
            // }
        },
    }
</script>

<style scoped>
    /*<style lang='scss' scoped>*/
    .personAddIndex {
        background-color: rgba(255, 68, 1, 0.72);
    }
    .addForm {
        background-color: gray;
        width: 80%;
        margin: 0 auto;
        border-radius: 10px;

    }
    .formItem{
        margin: 5px auto;
        padding: 10px;
    }
</style>